<template>
  <div class="c-p c-bg-sgray c-pz1">
    <div class="theme-bg-gradient18000 c-p c-hh500">
      <div class="c-fs48 c-fc-white c-pt52 c-pl32 c-fw600">日历打卡</div>
      <div class="c-fs22 c-fc-white c-mt20 c-pl32">
        打卡周期：{{calendarInfo.timeType==2?calendarInfo.startTime+'开始，'+calendarInfo.period+'天/周期':
          calendarInfo.startTime+'至'+calendarInfo.endTime}}
      </div>
      <div class="c-ph24 c-mt20">
        <!-- <img class="c-pa c-p-t0 c-p-l0 c-w100 c-hh250 c-pz99 theme-bg" :src="require('@/assets/i/wap/clockIn/study_record.png')" alt=""> -->
        <div class="c-flex-row c-textAlign-c c-pv26 c-bg-white c-p c-pz100 c-br20">
          <div class="c-flex-column c-flex-grow1 c-w0">
            <div class="c-fs40 c-lh c-fw600 c-fc-xblack">{{calendarInfo.hasClockNum}}</div>
            <div class="c-fs24 c-lh c-pt20 c-fc-gray">已打卡</div>
          </div>
          <div class="c-flex-column c-flex-grow1 c-w0">
            <div class="c-fs40 c-lh c-fw600 c-fc-xblack">{{calendarInfo.allDay}}</div>
            <div class="c-fs24 c-lh c-pt20 c-fc-gray">总天数</div>
          </div>
        </div>
      </div>
      <img class="c-pa c-p-r0 c-p-t28 c-ww196 c-pz99" :src="require('@/assets/i/wap/clockIn/day_time.png')" alt="">
    </div>
    <div class="c-ph24 c-pb120 c-p c-pz100 c-mt-152">
      <div class="c-bg-white c-br20">
        <div class="c-pv40 c-flex-row c-flex-center">
          <span @click="clickPrevMonth" :class="canGoPrev ? 'theme-fc':'c-fc-gray'" class="iconfont c-fs18 c-rotate90">&#xe70b;</span>
          <span class="c-ph52 c-fs32">{{curSelectDate}}</span>
          <i @click="clickNextMonth" :class="canGoNext ? 'theme-fc':'c-fc-gray'" class="iconfont c-fs18 c-rotate270">&#xe70b;</i>
        </div>
        <div class="c-flex-row c-fs20 c-fc-sblack c-textAlign-c c-ph24">
          <div class="c-flex-grow1 c-w0">日</div>
          <div class="c-flex-grow1 c-w0">一</div>
          <div class="c-flex-grow1 c-w0">二</div>
          <div class="c-flex-grow1 c-w0">三</div>
          <div class="c-flex-grow1 c-w0">四</div>
          <div class="c-flex-grow1 c-w0">五</div>
          <div class="c-flex-grow1 c-w0">六</div>
        </div>
        <div class="c-flex-row c-flexw-wrap c-pt8 c-ph24">
          <div @click="clickChooseDate(index)" v-for="(item,index) in dataList" v-bind:key="item.date" class="date-list-item">
            <span :class="item.type == 0 ? 'c-fc-gray': item.type == 2 ? 'theme-bg c-fc-white': item.type == 3 ? 'c-clinkgreen c-fc-white': ''"
              class="c-ww40 c-hh40 c-flex-row c-flex-center c-brp50">{{item.day}}</span>
            <div v-if="item.day == '今' && item.type != 2 && item.type != 3" class="c-ww8 c-hh8 c-brp50 c-bg-b3"></div>
          </div>
        </div>

        <div class="c-pv20 c-flex-row c-justify-end c-aligni-center c-fs24 c-pr60">
          <div class="c-ww20 c-hh20 c-brp50 theme-bg"></div>
          <div class="c-pl10 c-pr50">已打卡</div>
          <div class="c-ww20 c-hh20 c-brp50 c-clinkgreen"></div>
          <div class="c-pl10">补打卡</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { utilJs } from "@/utils/common.js";
  const ONE_DAY_TIMES_TAMP = 24 * 60 * 60 * 1000; //一天的时间毫秒数
  let startTimeTamp = 0;
  let endTimeTamp = 0;
  let fromMember = 0;
  let clockInId = ''; //课程id=
  export default {
    name: "ClockCalendar",
    components: {},
    data() {
      return {
        calendarInfo: {},
        curSelectDate: "", //当前选择的日期 2018/11
        canGoNext: false, //是否可以切换上个月
        canGoPrev: false, //是否可以切换下个月
        signlist: [],
        dataList: []
      };
    },
    methods: {
      //点击日期
      clickChooseDate(index) {
        if (this.dataList[index].type == 0) {
          return;
        }
        if (fromMember == 1) {
          //从个人中心进来的，跳转到作业打卡页面
          // if (isTeacher == 1) {
          //   this.$routerGo(this, "push", {
          //     path: `/homePage/clockIn/teaHomeWorker?fromDetail=1&clockInId=${clockInId}`
          //   });
          //   return
          // }
          this.$routerGo(this, "push", {
            path: `/homePage/clockIn/stuHomeWork?workType=1&clockInId=${clockInId}&curDate=${this.dataList[index].date}`
          });
        } else {
          this.$store.commit('updateClockCalendar', this.dataList[index]);
          this.$router.go(-1);
        }
      },
      getClockCalendar() {
        utilJs.getMethod(`${global.apiurl}signCard/myCalendar/${clockInId}`, res => {
          this.signlist = res.calendar;
          this.calendarInfo = {
            startTime: res.startTime.replace(/-/g, "/"),
            endTime: res.endTime.replace(/-/g, "/"),
            allDay: res.allDay,
            hasClockNum: res.hasClockNum,
            timeType:res.timeType,
            period:res.period
          }
          startTimeTamp = new Date(this.calendarInfo.startTime).getTime();
          endTimeTamp = new Date(this.calendarInfo.endTime).getTime();
          let curTimeTamp = new Date().getTime();
          //如果当前月份不在开始日期和结束日期之间，则默认为选择开始日期的月份绘制
          if (curTimeTamp < startTimeTamp || curTimeTamp > endTimeTamp + ONE_DAY_TIMES_TAMP) {
            this.curSelectDate = this.calendarInfo.startTime.substring(0, 7);
          } else {
            this.curSelectDate = utilJs.dateFormat(curTimeTamp, '/').substring(0, 7);
          }
          this.drawDate(this.curSelectDate);
          this.canGoPrevOrNext();
        });
      },
      //判断是否能切到上个月或下个月
      canGoPrevOrNext() {
        let startYear = this.calendarInfo.startTime.split('/')[0] * 1;
        let endYear = this.calendarInfo.endTime.split('/')[0] * 1;
        let curYear = this.curSelectDate.split('/')[0] * 1;
        let startMouth = this.calendarInfo.startTime.split('/')[1] * 1;
        let endMouth = this.calendarInfo.endTime.split('/')[1] * 1;
        let curMouth = this.curSelectDate.split('/')[1] * 1;
        this.canGoPrev = curYear > startYear || (curYear == startYear && curMouth > startMouth);
        this.canGoNext = curYear < endYear || (curYear == endYear && curMouth < endMouth);
        // let startMonthTamp = +new Date(this.calendarInfo.startTime.substring(0, 7));
        // let endMonthTamp = +new Date(this.calendarInfo.endTime.substring(0, 7));
        // let curSelectDateTamp = +new Date(this.curSelectDate);
        // this.canGoPrev = curSelectDateTamp > startMonthTamp;
        // this.canGoNext = curSelectDateTamp < endMonthTamp;
      },

      //上个月
      clickPrevMonth() {
        if (!this.canGoPrev) {
          return;
        }
        let selectArr = this.curSelectDate.split("/");
        let prevMonth = selectArr[1] - 1;
        let prevYear = selectArr[0];
        if (prevMonth <= 0) {
          prevMonth = prevMonth + 12;
          prevYear = prevYear - 1;
        }
        prevMonth = prevMonth < 10 ? `0${prevMonth}` : prevMonth;
        this.curSelectDate = `${prevYear}/${prevMonth}`;
        this.canGoPrevOrNext();
        this.drawDate(this.curSelectDate);
      },
      //下个月
      clickNextMonth() {
        if (!this.canGoNext) {
          return;
        }
        let selectArr = this.curSelectDate.split("/");
        let prevMonth = selectArr[1] * 1 + 1;
        let prevYear = selectArr[0] * 1;
        if (prevMonth > 12) {
          prevMonth = prevMonth - 12;
          prevYear = prevYear + 1;
        }
        prevMonth = prevMonth < 10 ? `0${prevMonth}` : prevMonth;
        this.curSelectDate = `${prevYear}/${prevMonth}`;
        this.canGoPrevOrNext();
        this.drawDate(this.curSelectDate);
      },
      //绘制当前月份的日历
      drawDate(dateStr) {
        let dateAtr = []; //日历数组
        //IOS无法转化2018/11
        dateStr = dateStr + '/01';
        let curDate = new Date(dateStr); //获取当前日期
        let curMonth = curDate.getMonth() + 1;
        let firstDayTimesTamp = curDate.getTime(); ///获取本月第一天时间戳
        let firstDayWeek = curDate.getDay(); //获取本月第一天是星期几
        let nowDayStr = utilJs.dateFormat(+new Date()); //获取今天的日期
        //如果本月第一天不是周日即firstDayWeek > 0 则将多出来的天数添加到日历数组内
        for (let i = firstDayWeek; i > 0; i--) {
          let item = {
            type: 0,
            day: "",
            date: "",
          };
          dateAtr.push(item);
        }
        console.log(dateAtr)
        //遍历所有剩下的天数添加到数组内，使得数组长度等于42（ 7 * 6）
        for (let j = 0; j < 42 - firstDayWeek; j++) {
          //获取当前天数时间戳+1小时
          let itemTimeTamp = firstDayTimesTamp + j * ONE_DAY_TIMES_TAMP;
          //获取当天日期对象
          let itemTimeDate = new Date(itemTimeTamp);
           console.log(firstDayTimesTamp, itemTimeDate, 'itemDay')
          //格式化当前日期为YYYY-MM-DD
          let itemDateStr = utilJs.dateFormat(itemTimeTamp);
          //获取当前天数月份
          let itemMonth = itemTimeDate.getMonth() + 1;
          if (itemMonth != curMonth) {
            break;
          }
          //获取当天为几号
          let itemDay = itemTimeDate.getDate();

          //判断当前是否为今天
          if (itemDateStr == nowDayStr) {
            itemDay = "今";
          }
          let itemType = 0;
          if (itemTimeTamp >= startTimeTamp && itemTimeTamp <= endTimeTamp) {
            itemType = 1;
          }
          for (let key of this.signlist) {
            //判断是否签到了
            if (key.day == itemDateStr) {
              itemType = key.type;
            }
          }
          let item = {
            type: itemType,
            date: itemDateStr,
            day: itemDay,
          };
          dateAtr.push(item);
        }
        this.dataList = dateAtr;
      },
      initData() {
        this.calendarInfo = {};
        this.curSelectDate = ""; //当前选择的日期 2018/11
        this.canGoNext = false; //是否可以切换上个月
        this.canGoPrev = false; //是否可以切换下个月
        this.signlist = [];
        this.dataList = [];
      }
    },
    activated() {
      this.initData();
      clockInId = this.$route.query.clockInId;
      fromMember = this.$route.query.fromMember || 0;
      this.getClockCalendar();
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .date-list-item {
    width: 14.2857%;
    height: 2.15rem;
    line-height: 2.15rem;
    font-size: 0.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
.c-clinkgreen{
  background-color:#3DCF56;
}
.c-mt-152{
  margin-top:-3.8rem ;
}
</style>
